<template>
    <div>
        <div style="display: flex;flex-direction: row;justify-content: center">
            <el-input v-model="inputInfo" clearable style="width: 200px;margin-right: 10px" type="text"></el-input>
            <el-button icon="el-icon-search" size="medium" style="margin-left: 10px"
                       type="success" @click="handleEnterpriseSearch">搜索
            </el-button>
            <el-button icon="el-icon-plus" size="medium"
                       style="margin-left: 100px" type="primary"
                       @click="handleEnterpriseAddition">新增
            </el-button>
        </div>
        <div style="display: flex;align-items: center;flex-direction: column;margin-left: -25px">
            <el-table :key="centerDialogVisible"
                      :data="enterprises"
                      stripe
                      style="width: 90%">
                <el-table-column label="ID" prop="id" width="50px"></el-table-column>
                <el-table-column label="企业名称" prop="name"></el-table-column>
                <el-table-column label="企业地址" prop="address"></el-table-column>
                <el-table-column label="企业坐标" prop="location">
                    <template slot-scope="scope">
                        <span>({{scope.row.location}})</span>
                    </template>
                </el-table-column>
                <el-table-column label="企业法人" prop="head"></el-table-column>
                <el-table-column label="法人电话" prop="headPhone"></el-table-column>
                <el-table-column label="企业类型" prop="type"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑
                        </el-button>
                        <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                :page-size="2"
                :total="paginationTotal"
                background
                layout="prev, pager, next"
                style="margin-top: 5px">
            </el-pagination>
        </div>
        <el-dialog
            :title="title"
            :visible.sync="centerDialogVisible"
            width="60%">
            <el-form :model="selectedEnterprise" class="selectedEnterpriseForm">
                <el-form-item label="企业名称:" prop="name">
                    <el-input v-model="selectedEnterprise.name" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="企业地址:" prop="address">
                    <el-input v-model="selectedEnterprise.address" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="企业坐标:" prop="location">
                    <el-input v-model="selectedEnterprise.location" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="企业法人:" prop="head">
                    <el-input v-model="selectedEnterprise.head" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="法人电话:" prop="headPhone">
                    <el-input v-model="selectedEnterprise.headPhone" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="企业类型:" prop="type">
                    <el-select v-model="selectedEnterprise.type">
                        <el-option
                            v-for="item in enterpriseOptions"
                            :key="item.label"
                            :label="item.label"
                            :value="item.label">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false;">取 消</el-button>
                <el-button type="primary" @click="handleDialogEnter">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import variables from "@/assets/variables";

export default {
    name: "EnterpriseMaintenance",
    data() {
        return {
            selectedEnterprise: {},
            selectedEnterpriseIndex: -1,
            enterprises: [],
            inputInfo: "",
            title: "",
            centerDialogVisible: false,
            enterpriseOptions: [
                {
                    label: "1",
                },
                {
                    label: "0",
                }
            ]
        }
    },
    methods: {
        handleEnterpriseAddition() {
            this.title = "新增";
            this.centerDialogVisible = true;
            this.selectedEnterprise = {
                id: this.enterprises.length + 1,
            };
            console.log(new Date());
        },
        handleEnterpriseSearch() {
            if (this.inputInfo==="") {
                this.enterprises = variables.enterprises;
            }else {
                this.enterprises = variables.enterprises.filter(firm =>
                    firm.name.includes(this.inputInfo) ||
                    firm.address.includes(this.inputInfo) ||
                    firm.location.includes(this.inputInfo) ||
                    firm.head.includes(this.inputInfo) ||
                    firm.headPhone.includes(this.inputInfo) ||
                    firm.type.includes(this.inputInfo)
                );
            }
        },
        handleEdit(index, obj) {
            this.title = "修改";
            this.centerDialogVisible = true;
            this.selectedEnterpriseIndex = index;
            this.selectedEnterprise = JSON.parse(JSON.stringify(obj));
        },
        handleDelete(index) {
            this.enterprises.splice(index, 1);
            this.$message({
                type: "success",
                message: "删除成功",
            })
        },
        handleDialogEnter() {
            if (this.title === "新增") {
                this.enterprises.push(this.selectedEnterprise);
            } else {
                this.enterprises[this.selectedEnterpriseIndex] = this.selectedEnterprise;
            }
            this.centerDialogVisible = false;
        }
    },
    computed: {
        paginationTotal() {
            return this.enterprises.length;
        }
    },
    mounted() {
        this.enterprises = variables.enterprises;
    }
}
</script>

<style scoped>
.selectedEnterpriseForm {
    height: 300px;
}

.selectedEnterpriseForm >>> .el-form-item {
    display: inline-block;
    width: 260px;
    float: left;
    margin: 5px 15px;
}
</style>